<template>
  <!-- 导航栏 -->

  <div class="mycourse">
    <div class="header w">
      <div class="logo">
        <img src="../assets/biaozhi.png" alt="" />
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">免费课程</a></li>
          <li><a href="#">项目实战</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>
      <div class="search">
        <input type="text" value="记得快忘得慢" />
        <button>搜索</button>
      </div>
      <div class="user">
        <a href="#">会员中心</a> | <a href="#">我的学习</a> |
        <a href="#">登录/注册</a>
      </div>
    </div>
    <!-- 顶部欢迎页面 -->
    <div class="header2">
      <div class="welcome">
        <a class="headphoto">
          <img src="https://img-ph-mirror.nosdn.127.net/LtGVfcVWo3hC6eeR-qo25Q==/2181149594631343171.jpg" alt="">
        </a>
        <div class="welcome-text">
          <h2>木易，您好</h2>
          <!-- <p>天赋如同自然花木，要用学习来修剪。</p> -->
        </div>
        
      </div>
    </div>

    <div class="menu">
      <el-input v-model="input" placeholder="请输入内容" ></el-input><el-button type="primary">搜索</el-button>
    </div>
  </div>
</template>

<style>
/* 导航栏 */
.w {
  width: 1200px;
  margin: auto;
}
.header {
  height: 42px;
  /* 上下30 */
  margin: 30px auto;
}

/* 顶部欢迎页面 */
.header2{
  width: auto;
  background-color: rgb(255,100,59);
  height: 180px;
}

.welcome{
  width: 700px;
  height: 100px;
  /* background-color: orange; */
  line-height: 50px;
  position:absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 140px auto 0 auto;
}
.headphoto img{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  line-height: 70px;
}
h2{
  font-size: 15px;
  float: left;
}

.welcome a,.welcome-text{
  float: left;
}
.menu{
width:150px ;
float: right;
margin: 20px 50px 0 0;
}

</style>